<template>
    <div class="box">
        <div class="left">
            <img src="../assets/logo.1296c0b5.jpg" alt="">
            <div>
                <span :class="{'selected':$route.path=='/home'}" @click="home('/home')">
                    <i class="iconfont icon-shouye" :class="{'selected':$route.path=='/home'}"></i>
                    <span>首页</span>
                </span>
                <span>{{username}},我将玫瑰藏于身后</span>
            </div>
        </div>
        <div class="right">
            <el-dropdown trigger="click">
                <div class="shezhi">
                    <i class="iconfont icon-shezhi"></i>
                    <span>
                        设置
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="(item,index) in $store.getters.getTopMenu" :key="index"
                            class="iconfont" :class="item.ico" @click.native="go(item.url)">{{item.name}}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </div>
            </el-dropdown>
            <div class="tuichu" @click="tuichu">
                <i class="iconfont icon-tuichu"></i>
                <span>
                    退出登录
                </span>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {

        }
    },
    methods: {
        tuichu() {
            this.$confirm('确定要退出登录吗？, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                sessionStorage.clear(),
                    this.$router.push("/login")
                this.$message({
                    type: 'success',
                    message: '退出成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取退出'
                });
            });
        },
        home() {
            this.$router.push('./home')
        },
        go(url) {
            this.$router.push(url)
        }
    },
    computed: {
        ...mapState({
            username: state => state.user.username
        })
    }
}
</script>

<style lang="less" scoped>
@import '../assets/font/iconfont.css';

.box {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.left {
    width: 610px;
    height: 50px;

    img {
        width: 130px;
        height: 30px;
        margin-right: 30px !important;
    }

    display: flex;
    align-items: center;

    div {
        span {
            margin-right: 8px;
            cursor: pointer;
        }
    }
}

.right {
    width: 200px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
        cursor: pointer;
    }
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}

.demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
}

.selected {
    color: #409EFF !important;
}
</style>